<!--
 * @Author: wpp 906008377@qq.com
 * @Date: 2025-03-27 14:47:20
 * @LastEditors: wpp 906008377@qq.com
 * @LastEditTime: 2025-04-01 15:52:33
 * @FilePath: \vue-project\src\views\component\attr.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <header>...header...</header>
  <main v-bind="$attrs">...main...</main>
  <footer>...footer...</footer>
</template>

<script setup lang="ts">
defineOptions({
  name: 'AttrPage'
})

import { useAttrs, onMounted } from 'vue'
import type { PropType } from 'vue'
import type { Test } from '@/types/test'

// withDefaults
const props = withDefaults(defineProps<Test>(), {
  name: 'test'
})

// props 设置类型声明
// const props = defineProps<Test>()

// PropType
// const props = defineProps({
//     test: Object as PropType<Test>,
//     text: {
//         type: String,
//         default: 'text',
//         required: true
//     }
// })

const attrObj = useAttrs()

onMounted(() => {
  console.log('attrObj', attrObj)
  console.log('props', props)
})
</script>

<style lang="scss" scoped></style>
